import Icon from '@/components/Icon'
import NavBar from '@/components/NavBar'
import { useEffect, useRef, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useHistory, useParams } from 'react-router'
import styles from './index.module.scss'
import { getArticleDetails, getCommentList } from '@/store/actions/article'
import NoComment from './comments/NoComment'
import CommentItem from './comments/CommentItem'
import { RootType } from '@/store'
import classNames from 'classnames'
import dayjs from 'dayjs'
import 'highlight.js/styles/vs2015.css'

const Article = () => {
  const [isShowAuthor, setIsShowAuthor] = useState(false)
  const authorRef = useRef<HTMLDivElement>(null)
  const { details, comments } = useSelector((state: RootType) => state.article)
  const history = useHistory()
  const { id } = useParams<{ id: string }>()
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getArticleDetails(id) as any)
  }, [dispatch, id])

  useEffect(() => {
    const onScroll = () => {
      const rect = authorRef.current!.getBoundingClientRect()
      if (rect.top <= 0) {
        setIsShowAuthor(true)
      } else {
        setIsShowAuthor(false)
      }
    }
    document.addEventListener('scroll', onScroll)
    return () => {
      document.removeEventListener('scroll', onScroll)
    }
  }, [])
  // 获取评论数据
  useEffect(() => {
    dispatch(getCommentList(id) as any)
  }, [dispatch, id])
  return (
    <div className={styles.root}>
      <div className="root-wrapper">
        {/* 顶部导航栏 */}
        <NavBar
          className="navBar"
          leftClick={() => history.go(-1)}
          extra={
            <span>
              <Icon type="icongengduo" />
            </span>
          }
        >
          {isShowAuthor ? (
            <div className="nav-author">
              <img src={''} alt="" />
              <span className="name">{'张三'}</span>
              <span className="follow">关注</span>
            </div>
          ) : (
            '文章详情'
          )}
        </NavBar>
        <div className="wrapper">
          <div className="article-wrapper">
            {/* 文章描述信息栏 */}
            <div className="header">
              <h1 className="title">{details.title}</h1>

              <div className="info">
                <span>{'2020-10-10'}</span>
                <span>{details.read_count} 阅读</span>
                <span>{details.comm_count} 评论</span>
              </div>

              <div className="author" ref={authorRef}>
                <img src={''} alt="" />
                <span className="name">{'张三'}</span>
                <span className={classNames('follow', { followed: details.is_followed })}>{details.is_followed ? '已关注' : '关注'}</span>
              </div>
            </div>

            {/* 文章正文内容区域 */}
            <div className="content">
              <div className="content-html dg-html" dangerouslySetInnerHTML={{ __html: details.content }}></div>
              <div className="date">发布文章时间：{dayjs(details.pubdate).format('YYYY-MM-DD')}</div>
            </div>
          </div>
        </div>
        {comments.total_count === 0 ? <NoComment></NoComment> : comments.results?.map((item) => <CommentItem comments={item} key={item.com_id}></CommentItem>)}
      </div>
    </div>
  )
}

export default Article
